<template>
	<view class="page">
		<Navbar iconColor="white" :showMenu="false" :showBack="true" :isDocument="false">
			<view class="navbarText">
				<text>{{navbarText}}</text>
			</view>
		</Navbar>

		<view class="bg" :style="{ top: -500 + navbarHeight + 'rpx' }">
			<image :src="songListDetail.coverImgUrl"></image>
		</view>

		<view class="songListInfo" :style="{ top: navbarHeight + 50 + 'rpx',opacity: opt + 0.1 }">
			<view class="coverImg">
				<image :src="songListDetail.coverImgUrl" mode="aspectFill"></image>
				<view class="shadow"></view>
			</view>
			<view class="info">
				<view class="songListName">
					<text>{{songListDetail.name}}</text>
				</view>
				<view class="userInfo" @click="toUserDetail(songListDetail.creator.userId)">
					<image :src="songListDetail.creator.avatarUrl" mode="widthFix"></image>
					<text>{{songListDetail.creator.nickname}}</text>
				</view>
				<view class="songListDesc">
					<text>{{songListDetail.description}}</text>
				</view>
			</view>
		</view>

		<!-- 收藏评论转发 -->
		<view class="bar" :style="{ opacity: opt + 0.1 }">
			<view class="collect" @click="collectSongList">
				<image :src="songListDetail.subscribed ? '/static/images/right-r.png' : '/static/images/collect-b.png'" mode="widthFix"></image>
				<text>{{$tools.calcPlayCount(songListDetail.subscribedCount)}}</text>
			</view>
			<view class="comment" @click="toComment">
				<image src="/static/images/comment-b.png" mode="widthFix"></image>
				<text>{{$tools.calcPlayCount(songListDetail.commentCount)}}</text>
			</view>
			<view class="share">
				<image src="/static/images/share-b.png" mode="widthFix"></image>
				<text>{{$tools.calcPlayCount(songListDetail.shareCount)}}</text>
			</view>
		</view>


		<view class="songList">
			<view class="header" :style="{ top: navbarHeight - 10 + 'rpx' }" @click="playSingleSongs(songListDetail.tracks)">
				<view class="playBtn">
					<image src="/static/images/play-ws.png" mode="widthFix"></image>
				</view>
				<text style="font-weight: bolder;color: #000;">播放全部</text>
			</view>
			<view class="songItem" v-for="(item,index) in songListDetail.tracks" :key="index" @click="playMusic(item.id)">
				<view class="coverImg">
					<text v-if="currentMusicId != item.id">{{index + 1}}</text>
					<image v-if="currentMusicId == item.id" src="/static/images/play-red.png" mode="widthFix" style="width: 50%;border-radius: 0;"></image>
				</view>
				<view class="songItemLeft">
					<view class="songName">
						<text :style="{ color: currentMusicId == item.id ? '#ff483b' : '' }">{{item.name}}</text>
						<text v-if="item.alias" style="color: #ababab;margin-left: 4px;">({{item.alias[0]}})</text>
					</view>
					<view class="songItemInfo">
						<image v-if="item.originCoverType == 1" src="/static/images/originCover.png" mode="widthFix" style="width: 40rpx;border-radius: 5rpx;"></image>
						<image v-if="item.fee != 8" src="/static/images/VIPIcon.png" mode="heightFix"></image>
						<image v-if="item.fee != 8" src="/static/images/testListen.png" mode="heightFix" style="height: 32rpx;"></image>
						<text>{{item.ar[0].name}} - </text>
						<text>{{item.al.name}}</text>
					</view>
				</view>
				<view class="songItemRight">
					<image v-show="item.mv != 0" src="/static/images/mv.png" mode="widthFix" @click.stop="playMv(item.mv)"></image>
					<image src="/static/images/more-g.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<Loading isFullScreen :active="songListDetail.creator.nickname == ''" text="loading..."></Loading>
		<playMusicBar></playMusicBar>
	</view>
</template>

<script>
	import Navbar from '@/components/navbar.vue'
	import Loading from '@/components/loading/loading.vue'
	import {
		getSongListDetail,
		collectSongList
	} from '@/api/music.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			Navbar,
			Loading
		},
		data() {
			return {
				id: '',
				songListDetail: {
					creator: {
						avatarUrl: '',
						nickname: ''
					}
				},
				opt: 1,
				navbarText: '歌单'
			}
		},
		onLoad(data) {
			this.id = data.id
			getSongListDetail(data.id).then(res => {
				res.data.playlist.description = res.data.playlist.description.split(/\s+/).toString()
				this.songListDetail = res.data.playlist
			})
		},
		onPageScroll(e) {
			// 控制歌单信息透明度
			this.opt = 1 - (e.scrollTop * this.pixelRatio) / 250
			// 控制导航栏标题
			this.navbarText = e.scrollTop * this.pixelRatio > 500 - (this.navbarHeight - 10) ? this.songListDetail.name : '歌单'
		},
		computed: {
			...mapState(['pixelRatio', 'navbarHeight', 'currentMusicId'])
		},
		methods: {
			...mapMutations(['changePlayList', 'changeCurrentMusicId']),
			// 播放音乐并修改播放列表
			playSingleSongs(songsList) {
				// let songs = { song: songsList }
				this.changeCurrentMusicId(songsList[0].id)
				this.changePlayList(songsList)
			},
			// 点击单曲项,播放音乐
			playMusic(id) {
				this.changeCurrentMusicId(id)
			},
			// 播放mv
			playMv(id) {
				uni.navigateTo({
					url: `/pages/video/MV/mvDetail?id=${id}`,
				})
			},
			// 收藏|取消收藏歌单
			collectSongList() {
				collectSongList(this.id, this.songListDetail.subscribed ? 0 : 1).then(res => {
					this.songListDetail.subscribed = !this.songListDetail.subscribed
					uni.showToast({
						title: this.songListDetail.subscribed ? '已收藏歌单' : '已取消收藏',
						icon: 'none'
					})
				})
			},
			// 跳转评论
			toComment() {
				uni.navigateTo({
					url: `/pages/music/comments?type=songList&id=${this.id}`
				})
			},
			// 跳转用户主页
			toUserDetail(id) {
				uni.navigateTo({
					url: `/pages/mine/userDetail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #fff;
	}

	.navbarText {
		display: flex;
		align-items: center;
		color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 34rpx;
		font-weight: bolder;
		width: 100%;
		height: 100%;
		z-index: 10000;
	}

	.bg {
		position: sticky;
		width: 750rpx;
		height: 500rpx;
		border-radius: 100% 100% 100% 100% / 0% 0% 5% 5%;
		overflow-y: hidden;
		z-index: 1000;
		background-color: #fff;

		image {
			width: 750rpx;
			height: 500rpx;
			filter: blur(50rpx);
			transform: scale(1.2);
			border-radius: 100% 100% 100% 100% / 0% 0% 5% 5%;
		}
	}


	.songListInfo {
		display: flex;
		position: absolute;
		top: 130rpx;
		left: 0;
		padding: 0 30rpx 0 50rpx;
		width: 750rpx;
		height: 200rpx;
		z-index: 1001;

		.coverImg {
			position: relative;

			image {
				height: 200rpx;
				width: 200rpx;
				border-radius: 20rpx;
				z-index: 110;
			}

			.shadow {
				position: absolute;
				top: -15rpx;
				left: 15rpx;
				width: 170rpx;
				height: 20rpx;
				background-color: rgba(80, 80, 80, .3);
				border-top-left-radius: 30rpx;
				border-top-right-radius: 30rpx;
				z-index: 1;
			}
		}

		.info {
			display: flex;
			flex-direction: column;
			// justify-content: space-between;
			width: 470rpx;
			height: 200rpx;
			padding-left: 30rpx;

			.songListName {
				width: 440rpx;
				height: 90rpx;
				color: #fff;
				font-size: 34rpx;
				font-weight: 600;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.userInfo {
				display: flex;
				align-items: center;
				width: 440rpx;
				height: 80rpx;
				color: #444;
				font-weight: 600;

				image {
					width: 60rpx;
					border-radius: 30rpx;
					margin-right: 10rpx;
				}
			}

			.songListDesc {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #444;
				font-weight: 600;
			}
		}
	}

	.bar {
		position: absolute;
		display: flex;
		justify-content: space-around;
		align-items: center;
		top: 460rpx;
		left: 100rpx;
		width: 550rpx;
		height: 80rpx;
		padding: 0 35rpx;
		border-radius: 50rpx;
		background-color: #fff;
		box-shadow: 2rpx 2rpx 8rpx 2rpx rgba(0, 0, 0, .1);
		z-index: 10001;

		view {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 160rpx;
			height: 60rpx;
		}

		.comment {
			border-left: 1px solid #ddd;
			border-right: 1px solid #ddd;
		}

		image {
			width: 40rpx;
			margin-right: 6px;
		}
	}

	.songList {
		width: 750rpx;
		padding: 0 0 100rpx;
		background-color: #fff;
		margin-top: 40rpx;
		z-index: 12;

		.header {
			position: sticky;
			display: flex;
			align-items: center;
			width: 750rpx;
			padding-left: 30rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 34rpx;
			background-color: #fff;
			z-index: 10000;

			.playBtn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50rpx;
				height: 50rpx;
				border-radius: 25rpx;
				background-color: #ff483b;
				margin-right: 16rpx;

				image {
					width: 40rpx;
				}
			}
		}

		.songItem {
			display: flex;
			align-items: center;
			width: 750rpx;
			height: 110rpx;
			padding: 0 30rpx;
			border-top: 1rpx solid #eee;

			.coverImg {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 60rpx;
				height: 110rpx;
				color: #888;
				font-size: 30rpx;

				image {
					width: 80rpx;
					border-radius: 14rpx;
				}
			}

			.songItemLeft {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 500rpx;
				height: 110rpx;
				padding-left: 20rpx;

				.songName {
					font-size: 30rpx;
					color: #000;
					font-weight: 600;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.songItemInfo {
					display: flex;
					align-items: center;
					width: 500rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					color: #777;
					font-size: 24rpx;

					text {
						&:last-child {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					image {
						height: 20rpx;
						margin-right: 6rpx;
					}
				}
			}

			.songItemRight {
				position: relative;
				width: 130rpx;
				height: 110rpx;
				line-height: 110rpx;

				image {
					width: 40rpx;

					&:first-child {
						position: absolute;
						width: 45rpx;
						top: 35rpx;
						left: 0;
					}

					&:last-child {
						position: absolute;
						top: 35rpx;
						right: 0;
					}
				}
			}
		}
	}
</style>
